<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        li {
            list-style: none;
        }

        input {
            outline: none;
        }

        .reg_form {
            width: 600px;
            height: 400px;
            margin: 40px auto 0;
        }

        .reg_form li {
            margin-bottom: 15px;
        }

        .reg_form label {
            display: inline-block;
            width: 100px;
            height: 36px;
            line-height: 36px;
            text-align: right;
        }

        .inp {
            width: 238px;
            height: 34px;
            border: 1px solid #ccc;
            margin-left: 10px;
        }

        .error {
            color: #df3033;
            margin-left: 10px;
        }

        .error_icon,
        .success_icon {
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url(./images/error.png) no-repeat;
            vertical-align: middle;
            margin-top: -2px;
        }

        .success {
            color: #40b83f;
            margin-left: 10px;
        }

        .success_icon {
            background-image: url(./images/success.png);
        }

        .safe {
            padding-left: 187px;
            color: #b2b2b2;
        }

        .safe em {
            padding: 0 12px;
            color: #fff;
        }

        .ruo {
            background-color: #de1111;
        }

        .zhong {
            background-color: #40b83f;
        }

        .qiang {
            background-color: #f79100;
        }

        .agree {
            padding-top: 20px;
            padding-left: 100px;
        }

        .agree input {
            vertical-align: middle;
            margin-right: 5px;
        }

        .agree a {
            color: #1ba1e6;
        }

        .over {
            width: 200px;
            height: 34px;
            background-color: #c81623;
            margin: 30px 0 0 130px;
            border: none;
            color: #fff;
            font-size: 14px;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 获取元素
            let tel = document.querySelector('#tel');
            let qq = document.querySelector('#qq');
            let nc = document.querySelector('#nc');
            let msg = document.querySelector('#msg');
            let pwd = document.querySelector('#pwd');
            let surepwd = document.querySelector('#surepwd');
            let form = document.querySelector('.reg_form form')

            let regtel = /^1[34578]\d{9}$/;
            let regqq = /^[1-9]\d{4,}$/;
            let regnc = /^[\u4e00-\u9fa5]{2,8}$/;
            let regmsg = /^\d{6}$/;
            let regpwd = /^[a-zA-Z0-9_-]{6,16}$/;

            let ruo = document.querySelector('.ruo');
            let zhong = document.querySelector('.zhong');
            let qiang = document.querySelector('.qiang');

            // 验证消息
            let errMsg = {
                tel: {
                    success: `<i class="success_icon"></i> 恭喜您输入正确`,
                    error: `<i class="error_icon"></i> 手机号码不正确`
                },
                qq: {
                    success: `<i class="success_icon"></i> 恭喜您输入正确`,
                    error: `<i class="error_icon"></i> QQ号码不正确`
                },
                nc: {
                    success: `<i class="success_icon"></i> 恭喜您输入正确`,
                    error: `<i class="error_icon"></i> 昵称必须为中文至少2个字`
                },
                msg: {
                    success: `<i class="success_icon"></i> 恭喜您输入正确`,
                    error: `<i class="error_icon"></i> 短信验证码错误`
                },
                pwd: {
                    success: `<i class="success_icon"></i> 恭喜您输入正确`,
                    error: `<i class="error_icon"></i> 密码6-16位不含特殊字符`
                },
                surepwd: {
                    success: `<i class="success_icon"></i> 恭喜您输入正确`,
                    error: `<i class="error_icon"></i> 两次密码输入不一致`
                }
            }

            // 失去焦点
            regTest(tel, regtel, 'tel');
            regTest(qq, regqq, 'qq');
            regTest(nc, regnc, 'nc');
            regTest(msg, regmsg, 'msg');
            regTest(pwd, regpwd, 'pwd');

            function regTest(elem, regRule, code) {
                elem.onblur = function () {
                    if (regRule.test(this.value)) {
                        this.nextElementSibling.className = 'success';
                        this.nextElementSibling.innerHTML = errMsg[code]['success'];
                    } else {
                        this.nextElementSibling.className = 'error';
                        this.nextElementSibling.innerHTML = errMsg[code]['error']
                    }
                }
            }

            // 确认密码失去焦点
            surepwd.onblur = function () {
                if (pwd.value == surepwd.value && surepwd.value !== '') {
                    this.nextElementSibling.className = 'success';
                    this.nextElementSibling.innerHTML = errMsg['surepwd']['success']
                } else {
                    this.nextElementSibling.className = 'error';
                    this.nextElementSibling.innerHTML = errMsg['surepwd']['error']
                }
            }

            // 检查密码强弱
            pwd.onkeyup = checkStrong;

            checkStrong();
            function checkStrong() {
                if (pwd.value.length <= 6) {
                    ruo.style.opacity = '1';
                    zhong.style.opacity = '.3';
                    qiang.style.opacity = '.3';
                } else if (pwd.value.length <= 10) {
                    ruo.style.opacity = '.3';
                    zhong.style.opacity = '1';
                    qiang.style.opacity = '.3';
                } else {
                    ruo.style.opacity = '.3';
                    zhong.style.opacity = '.3';
                    qiang.style.opacity = '1';
                }
            }

            // 表单提交
            form.onsubmit = function (e) {
                // 验证通过才提交
                if (regtel.test(tel.value) && regqq.test(qq.value) && regnc.test(nc.value) && regmsg.test(msg.value) && regpwd.test(pwd.value) && pwd.value == surepwd.value && surepwd.value !== '') {
                    return true;
                }
                // 全部失去焦点提示信息
                tel.onblur();
                qq.onblur();
                nc.onblur();
                msg.onblur();
                pwd.onblur();
                surepwd.onblur();
                return false;
            }
        });
    </script>
</head>

<body>
    <div class="reg_form">

        <form action="demo.php">
            <ul>
                <li>
                    <label for="tel">手机号:</label>
                    <input type="text" class="inp" id="tel">
                    <span class="">

                    </span>
                </li>
                <li>
                    <label for="">QQ:</label>
                    <input type="text" class="inp" id="qq">
                    <span></span>
                </li>
                <li>
                    <label for="">昵称:</label>
                    <input type="text" class="inp" id="nc">
                    <span></span>
                </li>
                <li>
                    <label for="">短信验证码:</label>
                    <input type="text" class="inp" id="msg">
                    <span></span>
                </li>
                <li>
                    <label for="">登陆密码:</label>
                    <input type="text" class="inp" id="pwd">
                    <span>
                    </span>
                </li>
                <li class="safe">
                    安全程度
                    <em class="ruo">弱</em>
                    <em class="zhong">中</em>
                    <em class="qiang">强</em>
                </li>

                <li>
                    <label for="">确认密码:</label>
                    <input type="text" class="inp" id="surepwd">
                    <span></span>
                </li>
                <li class="agree">

                    <input type="checkbox">同意协议并注册
                    <a href="#">《知果果用户协议》</a>
                </li>
                <li>
                    <input type="submit" value="完成注册" class="over">
                </li>
            </ul>
        </form>

    </div>
</body>

</html>